<template>
    <div ref="detailStatisticsRef" class="detail-statistics">
        <el-card class="statistics-card" shadow="never">
            <template #header>
                <div class="card-header">
                    <div class="header-left">
                        <span class="statistics-title card-title">数据概览</span>
                        <el-tooltip placement="right">
                            <template #content>
                                <div class="tip-text">
                                    <p v-for="tip in tips" :key="tip" class="tip-text-item">{{ tip }}</p>
                                </div>
                            </template>
                            <el-image :src="tipsImage"></el-image>
                        </el-tooltip>
                    </div>
                    <div class="header-right">
                        <div class="statistics-update-time font-style">
                            数据每小时更新一次，上次更新时间&nbsp;
                            <span>{{ statisticsUpdateTime || '--' }}</span>
                        </div>
                    </div>
                </div>
            </template>
            <div v-if="detailStatisticsFlag" class="card-content">
                <div v-for="item in statisticsData" :key="item.id" class="card-content-item">
                    <div class="item-title font-style">{{ item.label }}</div>
                    <div class="item-data font-style">{{ item.data }}</div>
                </div>
            </div>
            <el-skeleton v-else :rows="2" animated />
        </el-card>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import { useRoute } from 'vue-router';
import { useLazyData } from '@/hooks/commonHooks';
import { massBasic } from '@/api/friendcircle';
import { getTime } from '@/api/board';
import { numFormat } from '@/utils/utils';

const route = useRoute();
const routeQuery = route.query;
const tipsImage = ref<string>('https://img.static-keyid.cn/toolspace/scrm/2023/09/1695726390125uqgjo8qpc72xdjfn.png');
const tips = reactive<Array<string>>([
    '应发表成员数：当前企微朋友圈任务应执行发表的成员总数。',
    '未发表成员数：当前企微朋友圈任务应执行发表成员中未发表的成员总数。',
    '已发表成员数：当前企微朋友圈任务已发表的成员总数。',
    '点赞数：当前企微朋友圈已发表成员收获的点赞总数。',
    '评论数：当前企微朋友圈已发表成员收获的评论总数，同一个用户评论多次将统计多次。',
    '评论人数：当前企微朋友圈已发表成员收获评论的总人数，同一个用户评论多次，评论人数去重统计。'
]);
const detailStatisticsRef = ref<null | (InstanceType<typeof HTMLDivElement> & any)>(null);
const statisticsUpdateTime = ref<string>('');
const detailStatisticsFlag = ref<boolean>(false);
const statisticsData = ref<Array<any>>([
    {
        id: 'work_user_num',
        label: '应发表成员数',
        data: 0
    },
    {
        id: 'work_user_send_num',
        label: '已发表成员数',
        data: 0
    },
    {
        id: 'work_user_not_send_num',
        label: '未发表成员数',
        data: 0
    },
    {
        id: 'like_num',
        label: '点赞数',
        data: 0
    },
    {
        id: 'comment_per_num',
        label: '评论数',
        data: 0
    },
    {
        id: 'comment_user_num',
        label: '评论人数',
        data: 0
    }
]);

useLazyData(detailStatisticsRef, () => initData());

const initData = () => {
    getBaseDataFn();
    getTimeFn();
};

/**
 * @description: 获取基础数据
 * @return {*}
 */
const getBaseDataFn = () => {
    detailStatisticsFlag.value = false;
    const { id: send_moment_id } = routeQuery;
    const data = { send_moment_id };
    massBasic(data, true).then((res: any) => {
        if (res) {
            statisticsData.value = statisticsData.value.map(item => {
                item.data = numFormat(res[item.id]);
                return item;
            });
            detailStatisticsFlag.value = true;
        }
    });
};

/**
 * @description: 获取更新时间
 * @return {*}
 */
const getTimeFn = () => {
    const data = { census_module: 8 };
    getTime(data, true).then((res: any) => {
        if (res) {
            statisticsUpdateTime.value = res?.date_updated_at;
        }
    });
};
</script>

<style lang="scss" scoped>
.detail-statistics {
    height: 195px;
    margin-bottom: 18px;

    .font-style {
        white-space: nowrap;
        font-size: 14px;
        color: #444;
    }

    .card-title {
        white-space: nowrap;
        font-size: 16px;
        color: #444;
        font-weight: 500;
    }

    .statistics-card {
        .card-header {
            display: flex;
            align-items: center;
            justify-content: space-between;

            .header-left {
                display: flex;
                align-items: center;
                gap: 6px;

                .statistics-title {
                }

                :deep(.tip-text) {
                    width: 100px;

                    .tip-text-item {
                    }
                }

                .el-image {
                    width: 20px;
                    height: 20px;
                }
            }

            .header-right {
                .statistics-update-time {
                    color: #999;
                    line-height: 1;
                    display: flex;
                    align-items: center;
                    justify-content: flex-end;
                }
            }
        }

        .card-content {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 16px 0;

            .card-content-item {
                flex: 1;
                display: flex;
                flex-direction: column;
                gap: 18px;

                .item-title {
                }

                .item-data {
                    font-size: 30px;
                    font-weight: 600;
                    color: #444;
                }
            }
        }
    }
}
</style>
